<template>
  <card class="card" title="填写并提交信息">
    <div>
      <form @submit.prevent>
        <div class="row">
          <div class="col-md-5">
            <fg-input type="text" label="身份" placeholder="身份" v-model="user.ident">
            </fg-input>
          </div>
          <div class="col-md-3">
            <fg-input type="text" label="用户名" placeholder="用户名" v-model="user.username">
            </fg-input>
          </div>
          <div class="col-md-4">
            <fg-input type="email" label="邮箱地址" placeholder="邮箱地址" v-model="user.email">
            </fg-input>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <fg-input type="password" label="密码" placeholder="密码" v-model="user.pwd">
            </fg-input>
          </div>
          <div class="col-md-8">
            <fg-input type="text" label="工种" placeholder="工种" v-model="user.type">
            </fg-input>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <fg-input type="text" label="工作地点" placeholder="工作地点" v-model="user.location">
            </fg-input>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <fg-input type="text" label="所属工作小组" placeholder="所属工作小组" v-model="user.classwork">
            </fg-input>
          </div>
          <div class="col-md-4">
            <fg-input type="text" label="电话号码" placeholder="电话号码" v-model="user.phone">
            </fg-input>
          </div>
          <div class="col-md-4">
            <fg-input type="number" label="小组代号" placeholder="小组代号" v-model="user.classid">
            </fg-input>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>个性签名</label>
              <textarea rows="5" class="form-control border-input" placeholder="每个人都有自己的至理名言" v-model="user.aboutme">
                </textarea>
            </div>
          </div>
        </div>
        <div class="text-center">
          <p-button type="info" round @click.native.prevent="updateProfile">
            开始注册
          </p-button>
        </div>
        <div class="clearfix"></div>
      </form>
    </div>
  </card>
</template>
<script>
import CryptoJS from "crypto-js"
import axios from 'axios';
import NotificationTemplate from "../Notifications/NotificationTemplate";
import GlobalVars from "../../plugins/globalVars"

var flag
export default {
  data() {
    return {
      type: ["", "info", "success", "warning", "danger"],
      notifications: {
        topCenter: false,
      },
      user: {
        id: Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000,
        pwd: "",
        ident: "心动健康管理员",
        username: "",
        email: "",
        firstName: "",
        type: "",
        location: "",
        classwork: "",
        classid: "",
        phone: "",
        aboutme: "",
      },
    };
  },
  computed: {


  },
  methods: {
    postData(url, data) {
      return new Promise((reject2) => {
        axios.post(url, data)
          .then(response => {
            console.log(response.data)
            flag=false
            if (response.data == "OKR") {
              flag = true
              this.$store.state.imTxt = `注册成功  -  `
              this.$store.state.sufTxt = "不负相传，不负盛世，无愧自我，无愧时代，祝各位一路顺风，顶峰相见。"
              sessionStorage.setItem("logStatu","OK")
              this.notifyVue("bottom", "right", 1)
            }

            console.log(flag)
            if (flag) {
              setTimeout(this.$parent.c, 400, () => {
                  this.$store.state.nowId = this.user.id,
                  this.$store.state.nowUsername = this.user.username,
                  this.$store.state.nowStatus = this.user.status,
                  this.$store.state.nowEmail = this.user.email,
                  this.$store.state.nowType = this.user.type,
                  this.$store.state.nowLocation = this.user.location,
                  this.$store.state.nowClasswork = this.user.classwork,
                  this.$store.state.nowPhone = this.user.phone,
                  this.$store.state.nowClassid = this.user.classid,
                  this.$store.state.nowAboutme = this.user.aboutme,

                  alert(` 注册成功  -  工号是${this.user.id}`)
              })
            } else {

              this.$store.state.imTxt = `您注册的用户名已存在`
              this.$store.state.sufTxt = ''
              this.notifyVue("bottom", "right", 3)
            }
          })
          .catch(error => {
            reject2(error);
          });
      });
    },
    reject2(error) {
      this.$store.state.imTxt = `网络错误  -  ${error}`
      this.notifyVue("bottom", "right", 3)
    },
    reg() {
      flag = true
      this.postData(GlobalVars.Url+"stats/register", {
        id: this.user.id,
        username: this.user.username,
        pwd: CryptoJS.MD5(this.user.pwd).toString(),
        status: this.user.ident,
        email: this.user.username,
        type: this.user.type,
        location: this.user.location,
        classwork: this.user.classwork,
        phone: this.user.phone,
        classid: this.user.classid,
        aboutme: this.user.aboutme,
      }).catch(error => { this.reject2(error) })

    },


    updateProfile() {

      //   this.$store.state.imTxt = " 更新成功   "
      //   this.$store.state.sufTxt = "惟新厥德。终始惟一，时乃日新。"
      //   this.notifyVue("bottom", "right", 2)
      if (this.user.pwd != "" && this.user.phone != "" && this.user.email != "") {
        
        if(!this.user.pwd.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/)){
          this.$store.state.imTxt = " 注册失败  -  "
          this.$store.state.sufTxt = "密码至少包含8位字母和数字"
          this.notifyVue("bottom", "right", 3)
        } else if (!this.user.phone.match(/^1[3|4|5|7|8|9]\d{9}$/)) {
          this.$store.state.imTxt = " 注册失败  -  "
          this.$store.state.sufTxt = "请输入正确的电话号码"
          this.notifyVue("bottom", "right", 3)
        } else if (!this.user.email.match(/^([0-9a-zA-Z_\.\-\u4e00-\u9fa5])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]{2,8})$/)) {
          this.$store.state.imTxt = " 注册失败  -  "
          this.$store.state.sufTxt = "请输入正确的电子邮箱号"
          this.notifyVue("bottom", "right", 3)
        } else {
          this.reg();

        }
      
      } else {
        this.$store.state.imTxt = " 注册失败  -  "
        this.$store.state.sufTxt = "请勿输入空值"
        this.notifyVue("bottom", "right", 3)
      }
    },
    
    notifyVue(verticalAlign, horizontalAlign, color) {
      // const color = Math.floor(Math.random() * 4 + 1);
      this.$notify({
        component: NotificationTemplate,
        icon: "ti-gift",
        horizontalAlign: horizontalAlign,
        verticalAlign: verticalAlign,
        type: this.type[color],
      });
    }
  }
}

</script>
<style></style>
  